﻿<div class="form-group">
  <label class="col-sm-3 control-label">{{ name }}</label>
  <div class="col-sm-9">
    <div class="input-rules">
      <div class="input-rule">
        <template v-for="(item, index) in values">
          <div class="input-group">
            <select
              class="form-control key"
              v-model="item.key"
              @change="selectField(item)"
            >
              <option v-for="option in fields" :value="option.name"
                >{{ option.displayName }}</option
              >
            </select>
            <span class="input-group-addon separator"></span>
            <select class="form-control comparison" v-model="item.comparison">
              <option v-for="option in item.operators" :value="option"
                >{{ option }}</option
              >
            </select>
            <span class="input-group-addon separator"></span>
            <input
              v-model="item.value"
              type="text"
              class="form-control value"
            />

            <span class="input-group-btn"
              ><a
                class="btn btn-default"
                href="javascript:;"
                @click="add"
                v-kb-tooltip="Kooboo.text.tooltip.addAnotherRuleAfterThis"
                ><i class="fa fa-plus"></i></a
            ></span>

            <span class="input-group-btn"
              ><a
                class="btn btn-default"
                href="javascript:;"
                @click="remove(index)"
                v-kb-tooltip="Kooboo.text.common.remove"
                ><i class="fa fa-minus"></i></a
            ></span>
          </div>
          <div v-if="values.length > 1" class="input-group operator">
            <select class="form-control">
              <option selected="selected">{{ Kooboo.text.logical.and }}</option>
            </select>
          </div>
        </template>
      </div>
      <a
        v-if="values.length === 0"
        class="btn btn-default"
        href="javascript:;"
        @click="add"
        v-kb-tooltip="Kooboo.text.common.add"
      >
        <i class="fa fa-plus"></i>
      </a>
    </div>
  </div>
</div>
